<template>
	<view class="loginCode">
		<uv-navbar leftIcon='arrow-leftward' autoBack></uv-navbar>

		<view class="code-t1">
			Verification Code
		</view>
		<view class="code-t2">
			We sent a 6 digits verification code to:
		</view>
		<view class="code-phone">
			{{phone}}
		</view>

		<view class="code-input">
			<input class="input" type="number" maxlength="1" />
			<input class="input" type="number" maxlength="1" />
			<input class="input" type="number" maxlength="1" />
			<input class="input" type="number" maxlength="1" />
		</view>

		<view class="action-btn">
			<button @click="handleLoginCode" class="login-btn cu-btn block bg-purple lg round">Confirm</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '13155838780'
			}
		},
		methods: {
			handleLoginCode() {
				uni.navigateTo({
					url: '../earphoneSelection/earphoneSelection'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		margin-top: 44px;
		padding: 40rpx;
	}

	.code-t1 {
		color: #333;
		font-size: 48rpx;
		font-weight: 400;
		margin-bottom: 60rpx;
	}

	.code-t2 {
		color: #666;
		font-size: 28 rpx;
		font-weight: 400;
		margin-bottom: 30rpx;

	}

	.code-phone {
		color: #6928FF;
		font-size: 28rpx;
		font-weight: 400;
		margin-bottom: 60rpx;
	}

	.code-input {
		display: flex;
		justify-content: space-between;
		margin-bottom: 60rpx;

		.input {
			background-color: #F3F3F3;
			width: 118rpx;
			height: 120rpx;
			flex-shrink: 0;
			border-radius: 20px;
			caret-color: transparent;
			outline: none;
			text-align: center;
			color: #333;
			font-size: 48rpx;
			font-weight: 400;
		}
	}
</style>